<template>
  <div id="box">
    <div class="record-box">
      <p>当前操作：查询交易记录。请选择时间范围后点击 “查询” 按钮</p>
      <el-form :inline="true"
               :model="formInline"
               class="demo-form-inline">
        <el-form-item label="查询日期范围：">
          <el-input v-model="formInline.transactionDate1"
                    required></el-input>
        </el-form-item>
        <el-form-item label="到">
          <el-input v-model="formInline.transactionDate2"
                    required></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                max-height="240">
        <el-table-column prop="transactionDate"
                         label="交易日期"
                         width="200">
        </el-table-column>
        <el-table-column prop="amount"
                         label="支出/存入"
                         width="130">
        </el-table-column>
        <el-table-column prop="balance"
                         label="账户余额"
                         width="130">
        </el-table-column>
        <el-table-column prop="transactionType"
                         label="交易类型"
                         width="150">
        </el-table-column>
        <el-table-column prop="remark"
                         label="备注">
        </el-table-column>
      </el-table>
      <br>
      <div class="block">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="current"
                       :page-sizes="[2, 4, 7, 9]"
                       :page-size="size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>

    </div>
  </div>
</template>

<script>
import { getRecords } from '../../api/records'
export default {
  methods: {
    dateFormat (row, column, cellValue) {
      return cellValue ? fecha.format(new Date(cellValue), 'yyyy-MM-dd') : ''
    },
    tableRowClassName ({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    async getRecords () {
      let result = await getRecords(this.cardNo, this.formInline.transactionDate1, this.formInline.transactionDate2, this.current, this.size);
      this.tableData = result.page.records
      this.total = result.page.total
      this.size = result.page.size
      this.current = result.page.current
    }
    ,
    onSubmit () {
      if (this.formInline.transactionDate1 === '' || this.formInline.transactionDate2 === '') {
        this.tableData = []
        this.$message({
          message: '请完善日期范围！！！',
          center: true,
          type: 'error',
          showClose: true
        });
        return false;
      }
      this.current = 1
      this.getRecords()
    },
    // 改变每页条数
    handleSizeChange (val) {
      this.size = val;
      this.getRecords();
    },
    // 第几页
    handleCurrentChange (val) {
      this.current = val;
      this.getRecords();
    }
  },
  data () {
    return {
      currentPage4: 4,
      current: 1,
      size: 4,
      total: 0,
      cardNo: localStorage.getItem('cardNo'),
      formInline: {
        transactionDate1: '2021-11-08',
        transactionDate2: '2021-12-16'
      },
      tableData: []
    }
  }

}
</script>

<style lang="less" >
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.record-box {
  width: 800px;
  height: 400px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  text-align: center;
  padding: 20px;
  background: #fff;
}

#box {
  width: 100vw;
  height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>